<!DOCTYPE html>
<html lang="en">

<head>
  <title>社区页面</title>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device - width, initial - scale = 1.0">
  <link rel="stylesheet" href="../css/sx2_01.css">
</head>

<body>
  <header>
    <div id="header-content">
      <img src="../image/profile.jpg" id="top">
      <h1>sniper</h1>
    </div>
  </header>
  <nav>
    <ul>
      <a href="../html/index.html">首页</a>
      <a href="../html/search.html">搜索</a>
      <a href="../html/square.html">广场</a>
      <a href="../html/community.html">社区</a>
      <a href="../html/hot.html">热门</a>
      <a href="../html/room.html">房间</a>
      <a href="../html/shopping.html">购物（超链接）</a>
      <a href="../html/message.html">消息</a>
      <a href="../html/my.html">我的</a>
    </ul>
  </nav>
  <main>
    <section id="my-photos">
      <img src="../image/community_images1.jpg" alt="我的照片1" style="width: 100px; height: auto;">
      <!-- 可以按照需求添加更多照片 -->
    </section>
    <section id="communities">
      <h2>社区</h2>
      <div id="public-communities">
        <h3>公共社区</h3>
        <ul id="public-community-list">
          <li>光与夜之恋 以闪亮之名</li>
        </ul>
      </div>
      <div id="private-communities">
        <h3>私人社区</h3>
        <ul id="private-community-list">
          <li>我的社区 我加入的社区</li>
        </ul>
      </div>
      <div id="community-actions">
        <input type="text" id="community-name" placeholder="社区名称">
        <button id="create-community">创建社区</button>
        <input type="text" id="join-community-name" placeholder="要加入的社区名称">
        <button id="join-community">加入社区</button>
      </div>
    </section>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 获取创建社区和加入社区的按钮
      const createCommunityButton = document.getElementById('create-community');
      const joinCommunityButton = document.getElementById('join-community');

      // 获取社区名称输入框
      const communityNameInput = document.getElementById('community-name');
      const joinCommunityNameInput = document.getElementById('join-community-name');

      // 获取公共社区和私人社区列表
      const publicCommunityList = document.getElementById('public-community-list');
      const privateCommunityList = document.getElementById('private-community-list');

      // 创建社区函数
      function createCommunity() {
        const communityName = communityNameInput.value;
        if (communityName) {
          // 创建新的社区列表项
          const newCommunityItem = document.createElement('li');
          newCommunityItem.textContent = communityName;
          // 将新社区添加到私人社区列表
          privateCommunityList.appendChild(newCommunityItem);
          // 清空输入框
          communityNameInput.value = '';
        }
      }

      // 加入社区函数
      function joinCommunity() {
        const communityName = joinCommunityNameInput.value;
        if (communityName) {
          // 创建新的社区列表项
          const newCommunityItem = document.createElement('li');
          newCommunityItem.textContent = communityName;
          // 将新社区添加到公共社区列表
          publicCommunityList.appendChild(newCommunityItem);
          // 清空输入框
          joinCommunityNameInput.value = '';
        }
      }

      // 为创建社区按钮添加点击事件监听器
      createCommunityButton.addEventListener('click', createCommunity);

      // 为加入社区按钮添加点击事件监听器
      joinCommunityButton.addEventListener('click', joinCommunity);
    });
  </script>
</body>

</html>